<template>
	<div>
		<!-- 隐藏侧边栏 -->
		<van-popup
			v-model:show="isShow"
			position="right"
			:style="{ height: '100%', paddingTop: '60px' }">
			<van-sidebar v-model="typeids">
				<van-sidebar-item
					:title="item.name"
					v-for="item in rightBar"
					:key="item.id"
					@click="Change(item.id, true)" />
			</van-sidebar>
		</van-popup>

		<div class="headerbox">
			<div class="header">
				<div class="headerL">
					<a @click="this.$router.go(-1)" class="goback">
						<img src="/assets/images/goback.png"/>
					</a>
				</div>
				<div class="headerC0">
					<div class="ssdiv">
						<img src="/assets/images/ss.png" /><input
							v-model="keyValue"
							@change="ChangeTypeid"
							type="text"
							placeholder="输入关键字..." />
					</div>
				</div>
				<div class="headerR">
					<img
						src="/assets/images/tr.png"
						@click="leftPopupShow" />
				</div>
			</div>
		</div>

		<div class="clear"></div>
		<div class="shopType">
			<van-dropdown-menu>
				<!-- 商品状态 -->
				<van-dropdown-item
					v-model="value1"
					:options="option1" />
				<!-- 排序 -->
				<van-dropdown-item
					v-model="value2"
					:options="option2" />
			</van-dropdown-menu>
		</div>

		<div class="clear"></div>
		<div class="hbox"></div>
		<div
			class="mainWarp"
			style="background: #f3f3f3">
			<ul class="proul">
				<li
					v-for="dataArr in indexArr"
					:key="dataArr.id">
					<!-- <a href="detail.html"></a> -->
					<router-link :to="{ path: '/list/shop', query: { proid: dataArr.id } }">
						<img :src="dataArr.thumb_swiper" />
						<p
							class="tit"
							style=" width: 80%;
								height: 22px;
								text-overflow: ellipsis;
								overflow: hidden;
								white-space: nowrap;
							">
							{{ dataArr.name }}
						</p>
						<div class="price">
							<p>￥{{ dataArr.price }}</p>
							<p style="float: right">库存:{{ dataArr.stock }}</p>
						</div>
					</router-link>
				</li>
			</ul>
		</div>

		<!-- 网络请求加载状态 -->
		<van-overlay :show="isLoading" style="display: flex; justify-content: center; align-items: center;">
			<van-loading vertical>
				<template #icon>
					<van-icon name="star-o" size="30" />
				</template>
				加载中...
			</van-loading>
		</van-overlay>
	</div>
</template>

<script>
import { showFailToast } from 'vant';
	export default {
		created() {
			this.indexData();
		},
		data() {
			return {
				typeids: 0,
				isShow: false,
				indexArr: [],
				rightBar: null,
				keyValue: "",
				typeid: 0,
				value1: 0,
				value2: "createtime",
				option1: [
					{ text: "全部商品", value: 0 },
					{ text: "新款商品", value: 1 },
					{ text: "热销商品", value: 2 },
					{ text: "推荐商品", value: 3 },
				],
				option2: [
					{ text: "默认排序", value: "createtime" },
					{ text: "价格", value: "price" },
					{ text: "库存排序", value: "stock" },
				],
				st: null,
				isLoading: false
			};
		},
		methods: {
			async indexData() {
				this.isLoading = true;
				let res = await this.$api.listData({order: 'createtime'});
				if (res.code == 1) {
					if (res.data[1]) {
						this.rightBar = [{ id: 0, name: "全部商品" }, ...res.data[1]];
					}
					if (res.data[0]) {
						this.indexArr = res.data[0];
					}
				} else {
					showFailToast({
						message: res.msg
					})
				}
				this.isLoading = false;
			},
			leftPopupShow() {
				if (this.isShow) {
					this.isShow = false;
				} else {
					this.isShow = true;
				}
			},
			async Change(itemid = 0, isStatus = false) {
				if (isStatus) {
					this.typeid = itemid;
				}
				let data = {
					key: this.keyValue,
					typeid: this.typeid,
					status: this.value1,
					order: this.value2,
				};

				this.isLoading = true;
				let res = await this.$api.listData(data);

				if (res.code == 1) {
					this.indexArr = res.data[0];	
				} else {
					showFailToast({
						message: res.msg
					});
				}
				this.isLoading = false;
			},
		},
		watch: {
			keyValue() {
				let _this = this;
				clearTimeout(this.st);
				this.st = setTimeout(function () {
					clearTimeout(_this.st);
					_this.Change();
				}, 800);
			},
			value1() {
				this.Change();
			},
			value2() {
				this.Change();
			},
		},
	};
</script>

<style scoped>
	.leftnav {
		position: fixed;
		height: 100%;
		top: 0;
		right: 0;
		/* z-index: 99999; */
		padding-top: 110px;
	}

	a img {
		width: 100%;
		height: 163px;
		object-fit: cover;
	}
</style>
